<template>
  请输入书籍关键字：
  <input type="text" v-model="mytext" /><p></p>
  查询结果：
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{item}}
    </li>
  </ul>
</template>

<script>
import { watch, reactive, toRefs, onMounted } from 'vue'

export default {
  setup () {
    const state = reactive({
      mytext: '',
      list: []
    })
    watch(() => state.mytext, () => {
      state.list = state.list.filter(item => item.includes(state.mytext))
    })
    onMounted(() => {
      fetch('/test.json')
        .then(res => res.json())
        .then(res => {
          state.list = res.list
        })
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>